<!DOCTYPE html>
<html lang="en">
<!-- 伪类 允许你根据元素的状态和位置来选择元素 -->
 <!-- 伪元素  核心就是需要创建通常不存在于文档中的元素-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪类 */
        /* article p:first-child {
            font-size: 120%;
            font-weight: bold;
        } */
        p:hover{
            color: rgb(174, 78, 44);
            background-color: antiquewhite;
            font-size: 120%;
            transition: all 1s;
        }

        /* 伪元素 */
        article p::first-line {
  font-size: 120%;
  font-weight: bold;
}
.box::before {
  content: "This should show before the other content. ";
}
    </style>
</head>

<body>
    <article>
        <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

        <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
            collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
    </article>

    
    <p class="box">Content in the box in my HTML page.</p>
</body>

</html>